<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> -->
    <script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <title>Document</title>
    <style>
        body {
            background-color: white;
        }

        #app {
            /* background-color: white; */
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            /* border: 1px solid red; */
        }

        .flag_barLine {
            width: 85%;
            height: 700px;
            text-align: center;
            /* border: 1px solid red; */

        }

        #flagBarLine {
            width: 100%;
            height: 100%;
        }

        .flag_bar {
            width: 85%;
            height: 700px;
            text-align: center;
            /* border: 1px solid red; */

        }

        #flagBar {
            width: 100%;
            height: 100%;
        }

        .threeOne_line {
            width: 85%;
            height: 1000px;
            text-align: center;


        }

        #threeOneLine {
            width: 100%;
            height: 100%;
        }

        .four_line {
            width: 85%;
            height: 1000px;
            text-align: center;


        }

        #fourLine {
            width: 100%;
            height: 100%;
        }

        .five_line {
            width: 85%;
            height: 800px;
            text-align: center;


        }

        #fiveLine {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <div id="main" class="threeOne_line"></div> -->
        <div class="flag_barLine dis_box">
            <div id="flagBarLine"></div>
        </div>
        <div class="flag_bar dis_box">
            <div id="flagBar"></div>
        </div>
        <div class="threeOne_line dis_box">
            <div id="threeOneLine"></div>
        </div>
        <div class="four_line dis_box">
            <div id="fourLine"></div>
        </div>
        <div class="five_line dis_box">
            <div id="fiveLine"></div>
        </div>
    </div>
</body>
<script>
    var month = "";
    var flag = "";
    var flagBar = echarts.init(document.getElementById('flagBar'));
    var threeOneLine = echarts.init(document.getElementById('threeOneLine'));
    var fourLine = echarts.init(document.getElementById('fourLine'));
    var fiveLine = echarts.init(document.getElementById('fiveLine'));
    var flagBarLine = echarts.init(document.getElementById('flagBarLine'));
    // console.log("flagBar===", flagBar);
    // console.log("threeOneLine===", threeOneLine);
    // console.log("fourLine===", fourLine);
    // console.log("fiveLine===", fiveLine);
    // console.log("flagBarLine===", flagBarLine);
    var url = window.location.href;
    // var url = "http://127.0.0.1:5500/html/echarts.html?month=202406&flag=2";
    // var base_url = 'http://192.168.2.53:8084/kg';
    var base_url = 'http://134.64.251.153:8084/kg';
    // var base_url = 'http://localhost:8084/kg';
    console.log("url===", url);
    var reg = url.substring(url.indexOf("?") + 1, url.length).split("&");
    console.log("red==", reg);
    reg.forEach((item) => {
        let data = item.split("=");
        let x = data[0];
        // console.info("地址栏", x);
        if (x == "month") {
            month = data[1];
        }
        if (x == "flag") {
            flag = data[1];
        }
    });
    // console.log("month===", month);
    // console.log("flag===", flag);
    var disBoxClass = document.getElementsByClassName("dis_box")
    // console.log("disBoxClass===", disBoxClass);
    for (let index = 0; index < disBoxClass.length; index++) {
        const element = disBoxClass[index];
        // console.log("element==",element);
        if (flag - 1 == index) {
            element.style.display = 'block'
            element.style.textAlign = 'center'
        } else {
            element.style.display = 'none'
        }
    }
    if (month && flag) {
        console.log("month=======flag");
        switch (this.flag) {
            case '1':
                fecthBarLine();
                break;
            case '2':
                fetchDataBar();
                break;
            case '3':
                fecthThreeInoneLine();
                break;
            case '4':
                fecthFourLine();
                break;
            case '5':
                fecthFiveLine();
                break;
            default:
                break;
        }
    }
    // 饼图 - 非问题类支撑事项分布图
    function fetchDataBar() {
        let url = this.base_url + "/getWord/getNoQuestionBinTu?month=" + month
        axios.get(url).then(({ data }) => {
            // console.log("data====", data);
            if (data && data.code === 0) {
                // this.initChartBar(data.data);
                var chartData = data.data;
                // console.log("chartData----", chartData);
                var syjgdata = [];
                for (var i = 0; i < chartData.length; i++) {
                    syjgdata.push({
                        name: chartData[i].questionLabelClass,
                        value: chartData[i].num,
                        percent: chartData[i].pop,
                    })
                }
                // console.log("syjgdata===", syjgdata);
                var rich = {
                    // name: {
                    //     color: "#666666",
                    //     fontSize: 36,
                    //     // padding: [8, 30, 50, 30],
                    //     fontWeight: '400',
                    //     align: 'left'
                    // },
                    value: {
                        color: "#333",
                        fontSize: 15,
                        height: 25,
                        padding: [0, 30, 8, 30],
                        fontWeight: '500',
                        align: 'left'
                    },
                    percent: {
                        color: "#FFF",
                        align: 'left',
                        height: 25,
                        fontSize: 15,
                        fontWeight: '500',
                        //padding: [0, 5]
                    },
                    hr: {
                        borderColor: '#DFDFDF',
                        width: '100%',
                        height: 25,
                        borderWidth: 1,
                        height: 0,
                    },
                    cir: {
                        fontSize: 26,
                    }
                }
                //职称结构图表
                var colorList = ['#507AFF', '#51D9A2', '#FFC371', '#797AFF'];
                var option = {

                    series: [{
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        type: 'pie',
                        radius: ['0%', '90%'],
                        center: ["50%", "50%"],
                        label: {
                            normal: {
                                position: 'inner',
                                formatter: params => {
                                    return (
                                        '{percent|' + params.name + '\n' + params.value + "," + params.percent + '%}'
                                    );
                                },
                                rich: rich,
                            }
                        },
                        data: syjgdata
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。  
                flagBar.setOption(option);
                flagBar.resize();
                window.addEventListener("resize", () => {
                    flagBar.resize();
                });
            } else {
            }
        }).catch(error => { });
    }
    //横向柱状图 - 三合一 flag=3;
    function fecthThreeInoneLine() {
        let url = this.base_url + "/getWord/getNoQuestionTiaoXinTu?month=" + month
        axios.get(url).then(({ data }) => {
            // console.log("data====", data);
            if (data && data.code === 0) {
                var flagBarLineData = data.data;
                // console.log("flagBarLineData==",flagBarLineData);
                let quertionLabel = flagBarLineData.map((d) => d.quertionLabel);
                let num = flagBarLineData.map((d) => d.num);
                let questionLabelClass = flagBarLineData.map((d) => d.questionLabelClass);
                // console.log("------questionLabelClass--------", questionLabelClass);
                var colorList = []
                questionLabelClass.forEach(element => {
                    if (element == '1') {
                        // 黄色
                        colorList.push("#FF974C")
                    } else if (element == '2') {
                        //青绿色
                        colorList.push("#D4EC59")
                    } else if (element == '3') {
                        //蓝色
                        colorList.push("#5AAEF3")
                    }
                });
                // console.log("colorList===",colorList);
                let option = {
                    grid: {
                        left: "15",
                        containLabel: true,
                    },
                    xAxis: [
                        //x轴数据设置
                        {
                            type: "value",
                            name: "数量",
                            min: 0,
                            // max: 150,
                            // interval: 100, //间隔数
                            // splitNumber: 5,
                            axisLabel: {
                                // formatter: "{value} ",
                            },
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                //这是y轴文字颜色
                                lineStyle: {
                                    color: "#000",
                                },
                            },
                        },
                    ],
                    yAxis: [
                        {
                            type: "category",
                            offset: 0,
                            axisLine: {
                                //这是x轴文字颜色
                                lineStyle: {
                                    color: "#000",
                                },
                            },
                            data: quertionLabel,
                            axisPointer: {
                                type: "shadow",
                            },
                            axisTick: {
                                show: true,
                            },
                        },
                    ],
                    series: [
                        {
                            data: num,
                            type: "bar",
                            barWidth: 22,
                            label: {
                                normal: {
                                    show: true,
                                    position: "right",
                                    textStyle: {
                                        //数值样式
                                        color: "#000",
                                        fontSize: 14,
                                    },
                                },
                            },
                            itemStyle: {
                                //通常情况下：
                                normal: {
                                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                    color: function (params) {
                                        return colorList[params.dataIndex];
                                    },
                                },
                            },
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。  
                threeOneLine.setOption(option);
                threeOneLine.resize();
                window.addEventListener("resize", () => {
                    threeOneLine.resize();
                });
            } else {
            }
        }).catch(error => { });
    }
    //横向柱状图 - flag=4;
    function fecthFourLine() {
        let url = this.base_url + "/getWord/getQuestionTiaoXinTu?month=" + month
        axios.get(url).then(({ data }) => {
            // console.log("data====", data);
            if (data && data.code === 0) {
                var fourLineData = data.data;

                // console.log("datalist====", datalist);
                let proTypeData = fourLineData.sort((a, b) => {
                    return a.num - b.num;
                });
                let quertionLabel = proTypeData.map((d) => d.quertionLabel);
                let num = proTypeData.map((d) => d.num);
                let option = {
                    grid: {
                        left: "15",
                        containLabel: true,
                    },
                    xAxis: [
                        //x轴数据设置
                        {
                            type: "value",
                            name: "数量",
                            min: 0,
                            // max: 150,
                            // interval: 100, //间隔数
                            // splitNumber: 5,
                            axisLabel: {
                                // formatter: "{value} ",
                            },
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                //这是y轴文字颜色
                                lineStyle: {
                                    color: "#000",
                                },
                            },
                        },
                    ],
                    yAxis: [
                        {
                            type: "category",
                            offset: 0,
                            axisLine: {
                                //这是x轴文字颜色
                                lineStyle: {
                                    color: "#000",
                                },
                            },
                            data: quertionLabel,
                            axisPointer: {
                                type: "shadow",
                            },
                            axisTick: {
                                show: true,
                            },
                        },
                    ],
                    series: [
                        {
                            data: num,
                            type: "bar",
                            barWidth: 22,
                            label: {
                                normal: {
                                    show: true,
                                    position: "right",
                                    textStyle: {
                                        //数值样式
                                        color: "#000",
                                        fontSize: 14,
                                    },
                                },
                            },
                            
                            itemStyle: {
                                //通常情况下：
                                normal: {
                                    color:'#FFC000'
                                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                    // color: function (params) {
                                    //     var colorList = [
                                    //         "#FFC000",
                                    //     ];
                                    //     return colorList[params.dataIndex];
                                    // },
                                },
                            },
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。  
                fourLine.setOption(option);
                fourLine.resize();
                window.addEventListener("resize", () => {
                    fourLine.resize();
                });
            } else {
            }
        }).catch(error => { });
    }
    //横向柱状图 - flag=5;
    function fecthFiveLine() {
        let url = this.base_url + "/getWord/getDeptTiaoXinTu?month=" + month
        axios.get(url).then(({ data }) => {
            // console.log("data====", data);
            if (data && data.code === 0) {
                var fiveLineData = data.data;
                // console.log("datalist====", datalist);
                let proTypeData = fiveLineData.sort((a, b) => {
                    return a.num - b.num;
                });
                let completionDepart = proTypeData.map((d) => d.completionDepart);
                let num = proTypeData.map((d) => d.num);
                let option = {
                    grid: {
                        left: "15",
                        containLabel: true,
                    },
                    xAxis: [
                        //x轴数据设置
                        {
                            type: "value",
                            name: "数量",
                            min: 0,
                            // max: 150,
                            // interval: 100, //间隔数
                            // splitNumber: 5,
                            axisLabel: {
                                // formatter: "{value} ",
                            },
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                //这是y轴文字颜色
                                lineStyle: {
                                    color: "#000",
                                },
                            },
                        },
                    ],
                    yAxis: [
                        {
                            type: "category",
                            offset: 0,
                            axisLine: {
                                //这是x轴文字颜色
                                lineStyle: {
                                    color: "#000",
                                },
                            },
                            data: completionDepart,
                            axisPointer: {
                                type: "shadow",
                            },
                            axisTick: {
                                show: true,
                            },
                        },
                    ],
                    series: [
                        {
                            data: num,
                            type: "bar",
                            barWidth: 22,
                            label: {
                                normal: {
                                    show: true,
                                    position: "right",
                                    textStyle: {
                                        //数值样式
                                        color: "#000",
                                        fontSize: 14,
                                    },
                                },
                            },
                            itemStyle: {
                                //通常情况下：
                                normal: {
                                    color:"#4874CB"
                                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                    // color: function (params) {
                                    //     var colorList = [
                                    //         "#4874CB",
                                    //     ];
                                    //     return colorList[params.dataIndex];
                                    // },
                                },
                            },
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。  
                fiveLine.setOption(option);
                fiveLine.resize();
                window.addEventListener("resize", () => {
                    fiveLine.resize();
                });
            } else {
            }
        }).catch(error => { });
    }
    //柱状图和折线图结合 flag=1;
    function fecthBarLine() {
        let url = this.base_url + "/getWord/getZhuAndZhu?month=" + month
        axios.get(url).then(({ data }) => {
            // console.log("data====", data);
            if (data && data.code === 0) {
                var flagBarLineData = data.data;
                console.log("-----flagBarLineData-----", flagBarLineData);
                let month = flagBarLineData.map((d) => d.month);
                let order = flagBarLineData.map((d) => d.order);
                let myd = flagBarLineData.map((d) => d.myd);
                console.log("month==", month);
                console.log("order==", order);
                console.log("myd==", myd);
                var option = {
                    grid: {
                        top: "25%",
                        bottom: "10%"//也可设置left和right设置距离来控制图表的大小
                    },
                    legend: {
                        data: ["工单数", "满意度"],
                        top: "15%",
                        textStyle: {
                            color: "#000"
                        }
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true,
                            },
                        },
                        textStyle: {
                            align: 'left'  // 文字左对齐
                        }
                    },
                    xAxis: {
                        data: month,
                        axisLine: {
                            show: true, //隐藏X轴轴线
                            lineStyle: {
                                color: '#000'
                            }
                        },
                        axisTick: {
                            show: true //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#000" //X轴文字颜色
                            }
                        },

                    },
                    yAxis: [{
                        type: "value",
                        name: "工单数",
                        nameTextStyle: {
                            color: "#000"
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#000"
                            }
                        },

                    },
                    {
                        type: "value",
                        name: "满意度",
                        nameTextStyle: {
                            color: "#000"
                        },
                        position: "right",
                        splitLine: {
                            show: true
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000'
                            }
                        },
                        axisLabel: {
                            show: true,
                            formatter: "{value} %", //右侧Y轴文字显示
                            textStyle: {
                                color: "#000"
                            }
                        }
                    },
                    ],
                    series: [{
                        name: "满意度",
                        type: "line",
                        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        smooth: true, //平滑曲线显示
                        showAllSymbol: true, //显示所有图形。
                        symbol: "circle", //标记的图形为实心圆
                        symbolSize: 10, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#058cff",
                            normal: {
                                color: 'rgb(231,119,16)',
                                // label: {
                                //     show: true, //开启显示
                                //     position: "top", //在上方显示
                                //     formatter:'{c}%',//百分比显示
                                //     textStyle: {
                                //         //数值样式
                                //         color: "#000",
                                //         fontSize: 14,
                                //     },
                                // },
                            },
                        },
                        lineStyle: {
                            color: "#058cff"
                        },
                        areaStyle: {
                            color: "rgba(5,0,0, 0.2)"
                        },
                        data: myd
                    },
                    {
                        name: "工单数",
                        type: "bar",
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#00FFE3"
                                },
                                {
                                    offset: 1,
                                    color: "#4693EC"
                                }
                                ]),
                                // label: {
                                //     show: true, //开启显示
                                //     position: "top", //在上方显示
                                //     textStyle: {
                                //         //数值样式
                                //         color: "#000",
                                //         fontSize: 14,
                                //     },
                                // },
                            }
                        },
                        data: order
                    }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。  
                flagBarLine.setOption(option);
                flagBarLine.resize();
                window.addEventListener("resize", () => {
                    flagBarLine.resize();
                });
            } else {
            }
        }).catch(error => { });
    }

    // 页面加载完成后调用fetchDataBar函数  
    // window.onload = fetchDataBar;
</script>

</html>